<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="./layui/css/layui.css" />
    <link rel="stylesheet" href="./css/index.css" />
</head>

<body class="layui-layout-body">
    <div class="layui-layout layui-layout-admin">
        <!--头部-->
        <div class="layui-header">
            <!--头部左侧导航-->
            <ul class="layui-nav layui-layout-left" lay-filter="leftmenu">
                <li class="layui-nav-item">
                    <a href="javascript:;" class="hidetab" title="隐藏左侧菜单"><i class="layui-icon layui-icon-shrink-right"></i></a>
                </li>
                <li class="layui-nav-item">
                    <a href="./home.html" title="主页"><i class="layui-icon layui-icon-home"></i></a>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:window.location.reload();" title="刷新"><i class="layui-icon layui-icon-refresh-3"></i></a>
                </li>
            </ul>
            <!--头部右侧导航-->
            <ul class="layui-nav layui-layout-right" lay-filter="rightmenu">
                <li class="layui-nav-item">
                    <a href="javascript:;">
                        <i class="layui-icon layui-icon-user"></i>
                        <span id="name">xx</span>
                    </a>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">锁屏<i class="layui-icon layui-icon-password"></i></a>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;" id="logout">注销</a>
                </li>
            </ul>
        </div>
        <!--左侧-->
        <div class="layui-side layui-side-menu">
            <!--带滚动条垂直导航-->
            <div class="layui-side-scroll layui-bg-black">
                <div class="layui-logo">金榜后台管理系统</div>
                <ul class="layui-nav layui-nav-tree" lay-filter="navtree">
                    <!--默认展开-->
                    <li class="layui-nav-item layui-nav-itemed">
                        <a href="javascript:;" title="试题"><i class="layui-icon layui-icon-home"></i><cite>试题</cite></a>
                        <dl class="layui-nav-child">
                            <dd><a href="javascript:;" lay-href="chooseItem.html">查看试题</a></dd>
                            <dd><a href="javascript:;" lay-href="createItem.html">创建试题</a></dd>
                    </li>
                    <li class="layui-nav-item layui-nav-itemed">
                        <a href="javascript:;" title="试卷"><i class="layui-icon layui-icon-user"></i><cite>试卷</cite></a>
                        <dl class="layui-nav-child">
                            <dd><a href="javascript:;" lay-href="paper.html">查看试卷</a></dd>
                            <dd><a href="javascript:;" lay-href="exam.html">创建试卷</a></dd>
                        </dl>
                    </li>
                </ul>
            </div>
        </div>
        <!--正文-->
        <div class="layui-body layui-bg-gray">
            <iframe id="subPage" src="https://www.layui.com" width="100%" height="100%" frameborder="0" style="margin: 10px">
                    您的浏览器不支持iframe，请升级
                </iframe>
            <!-- 选项卡
            <div class="layui-admin-pagetabs">
                <div class="layui-tab layui-tab-brief" lay-allowClose="true" lay-filter="pagetabs">
                    <ul class="layui-tab-title layui-bg-white"></ul>
                    <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show"></div>
                    </div>
                </div>
            </div> -->

        </div>
        <!--底部-->
        <div class="layui-footer">© 2018 金榜试题管理系统</div>
    </div>
    <script src="layui/layui.js"></script>
    <script>
        // var domin = "http://localhost:8081/jinbang/";
        var domin = "http://11pm.top:8081/jinbang/";
        
        layui.use(['element', 'layer'], function() {
            let element = layui.element,
                layer = layui.layer,
                $ = layui.jquery;
            // // 调整 iframe 高度
            // function FrameWH() {
            //     let h = $(window).height() - 100;
            //     $("iframe").css("height", h + "px");
            // }
            // 每次窗口大小调整后，都重新调整 iframe
            $(document).ready(function() {
                let name = window.localStorage.getItem("name");
                $("#name").text(name);
                // $(window).resize(function() {
                //     FrameWH();
                // });
            });

            // // 注销
            $("#logout").click(function(event) {
                    event.preventDefault();
                    //jQuery.support.cors = true;
                    // console.log("jfdaifjaiooi")
                    $.ajax({
                        type: "GET",
                        url: domin + "signout",
                        xhrFields: {
                            withCredentials: true
                        },
                        success: function(data) {
                            // console.log(data);
                            if (data.success == "Logged out!") {
                                window.localStorage.clear();
                                window.location.href = "index.html";
                            } else {
                                alert("Wrong!");
                                window.location.reload();
                            }
                        }
                    });
                })
                //     //隐藏tab主页关闭标签
                // $(".layui-tab-title li:first-child i:last-child").css("display", "none");
                // // tab切换时，左侧菜单对应选中
                // element.on('tab(pagetabs)', function(data) {
                //     // tab切换时，左侧菜单对应选中
                //     // 左侧导航区 lay-href 与 iframe tab 的 lay-id 匹配
                //     var url = $(this).attr("lay-id");
                //     $(".layui-nav-tree li dd").each(function(i, e) {
                //         if ($(this).find("a").attr("lay-href") == url) {
                //             $(this).attr("class", "layui-this");
                //         } else {
                //             $(this).attr("class", "");
                //         }
                //     })
                // });
                // //顶部左侧菜单监控
                // element.on('nav(leftmenu)', function(elem) {
                //     //隐藏显示侧边菜单
                //     if (elem[0].className == "hidetab") { //隐藏
                //         //侧边菜单伸缩
                //         $(".layui-side-menu").animate({
                //             width: $(".layui-side-menu").width() - 144 + "px"
                //         });
                //         //正文伸缩
                //         $(".layui-body").animate({
                //             left: $(".layui-body").position().left - 144 + "px"
                //         });
                //         //底部伸缩
                //         $(".layui-footer").animate({
                //             left: $(".layui-footer").position().left - 144 + "px"
                //         });
                //         $(this).attr("class", "showtab");
                //         $(this).find("i").attr("class", "layui-icon layui-icon-spread-left");
                //         //侧边菜单只显示图标
                //         $(".layui-nav-tree").find("li").each(function(em, ind) {
                //             $(this).find("cite").css("display", "none");
                //             $(this).find("dl").css("display", "none");
                //         });
                //     } else if (elem[0].className == "showtab") { //显示
                //         $(".layui-side-menu").animate({
                //             width: $(".layui-side-menu").width() + 144 + "px"
                //         });
                //         $(".layui-body").animate({
                //             left: $(".layui-body").position().left + 144 + "px"
                //         });
                //         $(".layui-footer").animate({
                //             left: $(".layui-footer").position().left + 144 + "px"
                //         });
                //         $(this).attr("class", "hidetab");
                //         $(this).find("i").attr("class", "layui-icon layui-icon-shrink-right");
                //         $(".layui-nav-tree").find("li").each(function(em, ind) {
                //             $(this).find("cite").css("display", "");
                //             $(this).find("dl").css("display", "");
                //         });
                //     } else {

            //     }
            // });
            //顶部右侧菜单监控
            element.on('nav(rightmenu)', function(elem) {
                    var url = $(this).attr("lay-href");
                    if (url != undefined) {
                        layer.open({
                            title: elem[0].innerText,
                            type: 2,
                            content: url,
                            area: ['600px', '500px']
                        });
                    }
                    if (elem[0].innerText == "锁屏") {
                        layer.open({
                            title: "已锁屏",
                            content: '<input name="pass" class="layui-input" type="text" placeholder="请输入密码解锁" autocomplete="off"/>',
                            btnAlign: 'c',
                            anim: 1,
                            btn: ['解锁'],
                            yes: function(index, layero) {
                                var pass = layero.find('.layui-layer-content input').val();
                                if (pass == "123456") {
                                    layer.close(index);
                                } else {
                                    layer.title("密码不正确！", index);
                                }
                            },
                            cancel: function() {
                                return false //开启该代码可禁止点击该按钮关闭
                            }
                        });
                    }
                })
                //左侧垂直菜单监控
            element.on('nav(navtree)', function(elem) {
                if ($(".layui-side-menu").width() < 200) {
                    $(".layui-side-menu").animate({
                        width: $(".layui-side-menu").width() + 144 + "px"
                    });
                    $(".layui-body").animate({
                        left: $(".layui-body").position().left + 144 + "px"
                    });
                    $(".layui-footer").animate({
                        left: $(".layui-footer").position().left + 144 + "px"
                    });
                    $(".layui-layout-left li:first-child").find("a").attr("class", "hidetab");
                    $(".layui-layout-left li:first-child").find("i").attr("class", "layui-icon layui-icon-shrink-right");
                    $(".layui-nav-tree").find("li").each(function(em, ind) {
                        $(this).find("cite").css("display", "");
                        $(this).find("dl").css("display", "");
                    });
                } else {
                    if ($(this).attr("lay-href") != undefined) {
                        var flag = true;
                        // url
                        var url = $(this).attr("lay-href");
                        // console.log(url);
                        // //判断选项卡中是否存在已打开的页面，如果有直接切换到打开页面
                        // $(".layui-tab-title li").each(function(i, e) {
                        //     if ($(this).attr("lay-id") == url) {
                        //         //切换选项卡
                        //         element.tabChange('pagetabs', url);
                        //         flag = false;
                        //     }
                        // })
                        switch (url) {
                            case "chooseItem.html":
                                {
                                    $("#subPage").attr("src", "chooseItem.html");
                                    break;
                                }
                            case "createItem.html":
                                {
                                    $("#subPage").attr("src", "createItem.html");
                                    break;
                                }
                            case "paper.html":
                                {
                                    $("#subPage").attr("src", "paper.html");
                                    break;
                                }
                            case "exam.html":
                                {
                                    $("#subPage").attr("src", "exam.html");
                                    break;
                                }
                        }
                        // if (url == "chooseItem.html") {                            
                        // //新增选项卡
                        // element.tabAdd('pagetabs', {
                        //     title: elem[0].innerText
                        //         // ,content: '<iframe src="'+url+'" class="layui-admin-iframe" scrolling="auto" frameborder="0" onload="setIframeHeight(this)"></iframe>'
                        //         ,
                        //     content: '<iframe src="' + url + '" class="layui-admin-iframe" scrolling="auto" frameborder="0" style="width:100%;height:99%;""></iframe>',
                        //     id: url
                        // });
                        // //切换选项卡
                        // element.tabChange('pagetabs', url);
                        // FrameWH();
                        // }
                    }
                }
            });
        });
    </script>
</body>

</html>